<template>
  <el-dialog :visible="showDialog" width="500px" title="提交处置申请" :before-close="handleClose" center>
    <div style="margin: 0 20px;">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="资产编号">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-input v-model="item.id" placeholder="请输入需处置的资产编号"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="名称">{{item.name}}</el-form-item>
        <el-form-item label="品牌">{{brand.name}}</el-form-item>
        <el-form-item label="分类">{{category.name}}</el-form-item>
        <el-form-item label="部门">{{department.name}}</el-form-item>
        <el-form-item label="当前状态">{{statusMap.get(item.status)}}</el-form-item>
        <el-form-item label="状态变更">
          <el-select
            v-model="type"
            placeholder="请选择"
            :disabled="!item.allowHandle">
            <el-option
              v-for="status in statusList.slice(3)"
              :key="status[0]"
              :label="status[1]"
              :value="status[0]">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center;">
      <el-button type="primary" :disabled="!item.allowHandle" @click="submit()">提交</el-button>
      <el-button type="infor" @click="close()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import statusMap from '@/data/assetStatus'

import * as handle from '@/api/handle'
import * as asset from '@/api/asset'
import * as category from '@/api/category'
import * as brand from '@/api/brand'
import * as department from '@/api/department'

export default {
  name: 'HandleForm',
  props: ['showDialog'],
  data () {
    return {
      item: {},
      category: {},
      brand: {},
      department: {},
      type: '',
      statusMap,
      statusList: [...statusMap]
    }
  },
  methods: {
    search () {
      const id = this.item.id
      if (isNaN(id) || id === '' || id === undefined) {
        return
      }
      // 获取资产信息
      asset.selectById(this.item.id).then(resp => {
        this.item = resp.data
        this.item.allowHandle = this.item.depaId === this.$store.state.user.depaId && this.item.status === 0
        // 获取品牌信息
        brand.selectById(this.item.brandId).then(resp => {
          this.brand = resp.data
        }).catch(e => { console.error(e) })
        // 获取分类信息
        category.selectById(this.item.cid).then(resp => {
          this.category = resp.data
        }).catch(e => { console.error(e) })
        // 获取部门信息
        department.selectById(this.item.depaId).then(resp => {
          this.department = resp.data
        }).catch(e => { console.error(e) })
      }).catch(() => {
        console.$message.error('无匹配的资产信息')
      })
    },
    // 提交申请
    submit () {
      handle.insert({
        assetId: this.item.id,
        type: this.type
      }).then(resp => {
        this.$notify.success({title: '提示', message: '提交成功'})
        this.$emit('success')
        this.close()
      }).catch((e) => {
        this.$notify.error({title: '警告', message: e.response.data.message || '提交失败'})
      })
    },
    // 关闭对话框
    close () {
      this.$emit('update:showDialog', false)
      this.item = {}
      this.brand = {}
      this.category = {}
      this.department = {}
    },
    // 关闭对话框前处理
    handleClose (done) {
      this.$confirm('确认关闭？').then(() => {
        this.close()
        done()
      }).catch(() => {})
    }
  }
}
</script>

<style>
</style>
